<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
	<link rel="stylesheet" href="../../../css/public.css" media="all">
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<!--搜索开始-->
			<fieldset class="layui-elem-field layuimini-search">
				<legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="" id="searchFrm">
						<div class="layui-form-item">
							<label class="layui-form-label">所属部门</label>
							<div class="layui-input-inline">
								<!-- 隐藏部门ID  修改操作 -->
								<input type="hidden" name="deptid" id="p_deptid" />
								<input type="text" id="p_deptname" readonly="readonly" autocomplete="off"
									placeholder="请选择所属部门" class="layui-input">
							</div>
							<!--  选中部门树  -->
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-warm" id="doSelectDept"><label
										class="layui-icon layui-icon-male"></label>选择</a>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">用户名称</label>
								<div class="layui-input-inline">
									<input type="text" name="name" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">用户备注</label>
								<div class="layui-input-inline">
									<input type="text" name="remark" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
										class="layui-icon layui-icon-search"></label>搜索</a>
								<a class="layui-btn layui-btn-warm" id="resetTabsearchFrm" lay-filter="data-search-btn">
									<label class="layui-icon layui-icon-refresh"></label>重置</a>
							</div>
						</div>
					</form>
				</div>
			</fieldset>
			<!--搜索结束-->

			<!--表格开始-->
			<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
			<script type="text/html" id="userToolBar">
					<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
				    </script>
			<script type="text/html" id="userTableBar">
					<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="update">修改</a>
					    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
						<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="selectRole">分配角色</a>
					    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="resetPwd">重置密码</a>
					</script>


			<script type="text/html" id="availableTpl">
					<!-- 这里的 checked 的状态只是演示 -->
			<input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用"
				lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
			</script>
			<!--表格结束-->

			<!--添加和修改的弹出层开始-->
			<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
				<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
					<div class="layui-form-item" id="div_pid">
						<label class="layui-form-label">所属部门</label>
						<div class="layui-input-inline">
							<!-- 存储部门id 修改等操作 -->
							<input type="hidden" name="deptid" id="deptid" />
							<input type="text" id="deptid_name" readonly="readonly" autocomplete="off"
								placeholder="请选择所属部门" class="layui-input">
						</div>
						<div class="layui-input-inline">
							<a class="layui-btn layui-btn-warm" id="doDataFromSelectDept"><label
									class="layui-icon layui-icon-male"></label>选择</a>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户姓名</label>
							<div class="layui-input-inline">
								<input type="hidden" name="id" />
								<input type="text" name="name" id="username" lay-verify="required" autocomplete="off"
									placeholder="请输入用户姓名" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">登陆名称</label>
							<div class="layui-input-inline">
								<input type="text" name="loginname" id="loginname" lay-verify="required"
									autocomplete="off" placeholder="请输入登陆名称" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">用户地址</label>
						<div class="layui-input-block">
							<input type="text" name="address" autocomplete="off" placeholder="请输入用户地址"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">用户备注</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入用户备注" name="remark" class="layui-textarea"></textarea>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">入职时间</label>
							<div class="layui-input-inline">
								<input type="text" name="hiredate" id="hiredate" lay-verify="required"
									readonly="readonly" autocomplete="off" placeholder="请选择入职时间" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">排序码</label>
							<div class="layui-input-inline">
								<input type="text" name="ordernum" id="ordernum" lay-verify="required"
									autocomplete="off" placeholder="请输入排序码" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户性别</label>
							<div class="layui-input-inline">
								<input type="radio" name="sex" value="1" title="男" checked="checked"
									class="layui-input">
								<input type="radio" name="sex" value="0" title="女" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block" style="text-align: center;">
							<a class="layui-btn " lay-submit="" lay-filter="doSubmit"><label
									class="layui-icon layui-icon-release"></label>提交</a>
							<a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()"
								lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
						</div>
					</div>
				</form>
			</div>
			<!--添加和修改的弹出层结束-->

			<!--选择菜单和权限的弹出层开始-->
			<div id="selectRoleDiv" style="display: none;padding: 0.3125rem;">
				<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
			</div>
			<!--选择菜单和权限的弹出层结束-->

		</div>
	</div>
	<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
	<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
	<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
	<script src="../../../lib/common/common.js" charset="utf-8"></script>
	<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
	<script src="../../../lib/common/Convert_Pinyin.js" charset="utf-8"></script>
	<script>
		layui.use(['form', 'table', 'laydate', 'layer', 'treeTable'], function () {
			var form = layui.form;
			var table = layui.table;
			var laydate = layui.laydate;
			var layer = layui.layer;
			var treeTable = layui.treeTable;

			laydate.render({
				elem: '#hiredate',
				type: 'datetime'
			});

			//示范一个公告层
			layer.open({
				type: 1,
				title: false, //不显示标题栏
				closeBtn: false,
				area: 'auto',
				shade: 0.8,
				id: 'LAY_layuipro' //设定一个id，防止重复弹出
				// ,btn: ['火速围观', '残忍拒绝']
				,
				btn: ['好哒我知道啦!!!'],
				btnAlign: 'c',
				moveType: 0, //拖拽模式，0或者1
				content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">亲如表格数据 加载慢或出现数据异常请点击刷新试一试呢！！！<p><p><p><p><p>我们此后的征途是星辰大海 ^_^</p></div>'
			});


			// 定义数据表格
			var tableIns = table.render({
				elem: '#userTable',
				url: api + 'user/loadAllUser',
				toolbar: "#userToolBar",
				cellMinWidth: true,
				height: 'full-200',
				cols: [
					[{
						field: 'id',
						title: 'ID',
						align: "center",
						width: 80
					},
					{
						field: 'name',
						title: '用户姓名',
						align: "center",
						width: 120
					},
					{
						field: 'loginname',
						title: '登陆名称',
						align: "center",
						width: 120
					},
					{
						field: 'deptname',
						title: '所属部门',
						align: "center",
						width: 120
					},
					{
						field: 'remark',
						title: '用户备注',
						align: "center",
						width: 120
					},
					{
						field: 'sex',
						title: '性别',
						align: "center",
						templet: function (d) {
							return d.sex == 1 ? '男' : '女';
						},
						width: 80
					},
					{
						field: 'address',
						title: '用户地址',
						align: "center",
						width: 120
					},
					{
						field: 'available',
						title: '是否可用',
						align: "center",
						templet: '#availableTpl',
						width: 120
					},
					{
						field: 'hiredate',
						title: '入职时间',
						align: "center",
						width: 200
					},
					{
						field: 'ordernum',
						title: '排序码',
						align: "center",
						width: 100
					},
					{
						field: 'imgpath',
						title: '用户头像',
						align: "center",
						event: 'imgpath',
						width: 100,
						templet: function (d) {
							return "<img width=30 height=30 class='images_path'  src='" + baseUrl + d.imgpath + "' />"
						}
					},
					{
						title: '操作',
						// width: 300,
						templet: '#userTableBar',
						fixed: "right",
						align: "center"
					}
					]
				],
				page: true
			});

			// 监听搜索操作
			form.on('submit(data-search-btn)', function (data) {
				var params = $("#searchFrm").serialize();
				//执行搜索重载
				table.reload('userTable', {
					page: {
						curr: 1
					},
					url: api + 'user/loadAllUser?' + params
				});
				return false;
			});

			//监听表头的事件
			table.on('toolbar(userTable)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case 'batchdelete':
						batchdelete();
						break;
					case 'add':
						openAddUser();
						break;
				};
			});


			// 监听添加和修改弹出层的部门选中
			$("#doDataFromSelectDept").click(function () {
				var f_id = $("#deptid").val();
				// 参数一 回调信息
				openDeptSelecter(null, f_id, function (id, name) {
					// 回显数据
					$("#deptid").val(id);
					$("#deptid_name").val(name);
				});

			});


			// 监听搜索  选中部门
			$("#doSelectDept").click(function () {
				var f_id = $("#deptid").val();
				// 参数一 回调信息
				openDeptSelecter(null, f_id, function (id, name) {
					// 回显数据
					$("#p_deptid").val(id);
					$("#p_deptname").val(name);
				});
			});

			// 监听重置
			$("#resetTabsearchFrm").click(function () {
				$('#searchFrm')[0].reset();
				$("#deptid").val('');
				$("#p_deptid").val('');
				//执行搜索重载
				table.reload('userTable', {
					page: {
						curr: 1
					},
					url: api + 'user/loadAllUser'
				});
			})


			//监听可用操作
			form.on('switch(availableSwitch)', function (obj) {
				// this.value  表示当前单击的这个
				$.post(api + "user/updateUser", { id: this.value, available: obj.elem.checked ? 1 : 0 }, function (res) {
					layer.msg(res.msg);
					tableIns.reload({
						url: api + 'user/loadAllUser'
					});
				})

			})





			//监听用户姓名失去焦点的事件
			$("#username").on("blur", function () {
				var name = $("#username").val();
				// 进行分解名称
				var fullName = pinyin.getFullChars(name);
				$("#loginname").val(fullName.toLowerCase());
			})



			//监听行数据的事件
			table.on('tool(userTable)', function (obj) {
				var data = obj.data;
				if (obj.event === 'delete') {
					layer.confirm('真的删除【' + data.name + '】这个用户吗么', function (index) {
						$.post(api + "user/deleteUser", {
							id: data.id
						}, function (res) {
							layer.msg(res.msg);
							obj.del();
							layer.close(index);
						})
					});
				} else if (obj.event === 'update') {
					openUpdateUser(data);
				} else if (obj.event === 'resetPwd') {
					resetPwd(data);
				} else if (obj.event === 'selectRole') {
					openSelectRole(data);
				}else if (obj.event === 'imgpath') {
					layer.open({
						type: 1
						, title: "用户头像"
						, closeBtn: false
						, area: '400px'
						, shade: 0.8
						, id: 'LAY_layuipro' //设定一个id，防止重复弹出
						, btn: ['帅帅气气']
						, btnAlign: 'c'
						, moveType: 1 //拖拽模式，0或者1
						, content: '<img class="layui-upload-img  layui-circle userFaceBtn userAvatar" style="width: 300px;height: 300px;margin: 0 40px;" src="' + baseUrl + data.imgpath + '" id="userFace" name="imgpath">'

					});

				}
			});

			// 重置密码
			function resetPwd(data) {
				layer.confirm('真的重置【' + data.name + '】这个用户的密码吗?', function (index) {
					$.post(api + "user/resetUserPwd", { id: data.id }, function (res) {
						layer.msg(res.msg);
						layer.close(index);
					})
				});
			}


			// 定义全局变量
			var mainIndex;
			var url;

			// 打开添加用户弹出层
			function openAddUser() {
				mainIndex = layer.open({
					type: 1.,
					title: '添加用户',
					content: $("#addOrUpdateDiv"),
					area: ['800px', '500px'],
					success: function (index) {
						// 显示提示信息
						layer.tips("登陆用户名无需之编写，也可修改!!!", "#loginname", { tipsMore: true });

						layer.tips("点击此处选中相应的部门哦!!!!", "#doDataFromSelectDept", { tipsMore: true });


						// 设置跳转地址
						url = api + "user/addUser";
						// 重置表单
						$("#dataFrm")[0].reset();
						// 查询最大排序码
						$.get(api + "user/queryUserMaxOrderNum", function (res) {
							$("#ordernum").val(res.data);
						})
					}
				});
			}

			// 打开修改用户的弹出层
			function openUpdateUser(data) {
				mainIndex = layer.open({
					type: 1,
					title: '修改【' + data.name + '】用户',
					content: $("#addOrUpdateDiv"),
					area: ['800px', '600px'],
					success: function (index) {
						url = api + "user/updateUser";
						//装载数据表格
						form.val("dataFrm", data);

						//根据部门ID查询部门名称
						$.get(api + "dept/getDeptById", {
							id: data.deptid
						}, function (res) {
							console.log(res)
							$("#deptid_name").val(res.data.title);
						});

					}
				});
			}

			// 监听 添加和修改的提交
			form.on("submit(doSubmit)", function (data) {
				var params = $("#dataFrm").serialize();
				// 提交数据
				$.post(url, params, function (res) {
					layer.msg(res.msg);
					if (res.code == 200) {
						tableIns.reload();
					}
					layer.close(mainIndex);
				})
				return false;
			});


			// 打开分配角色窗口 roleTable
			function openSelectRole(data_table) {
				var table_RolesIns;
				mainIndex = layer.open({
					type: 1,
					title: '分配【' + data_table.name + '】用户和角色',
					content: $("#selectRoleDiv"),
					area: ['800px', '600px'],
					btn: ['<span class="layui-icon layui-icon-ok">确认分配</span>'],
					btnAlign: 'c',
					yes: function () {
						// 获取选中的数据行
						var checkStatus = table.checkStatus('roleTable');
						var m = checkStatus.data;
						// 获取当前行点击的用户id
						var uid = data_table.id;
						var params = "uid=" + uid;
						$.each(m, function (x, item) {
							params += "&rids=" + item.id;
						});
						// alert(params);
						$.post(api + "user/saveUserRole", params, function (res) {
							layer.msg(res.msg);
							layer.close(mainIndex)
						})

					},
					success: function (index) {
						// 加载角色数据    根据用户id查询该用户拥有的角色id  喝 可用的
						table_RolesIns = table.render({
							elem: '#roleTable',
							url: api + 'role/loadAllAvailableRoleNoPage?userId=' + data_table.id,
							toolbar: false,
							cellMinWidth: true,
							cols: [[
								{ type: "checkbox", fixed: "left" },
								{ field: 'id', title: 'ID', align: "center" },
								{ field: 'name', title: '角色标题', align: "center" },
								{ field: 'remark', title: '角色备注', align: "center" }
							]]

						});

					}
				});
			}


 
		});

	</script>

</body>

</html>